<script setup>
import "ol/ol.css"
import "ol-ext/dist/ol-ext.css"
import LayerSwitcher from "ol-ext/control/LayerSwitcher"
import {View} from "ol";
import {Map} from "ol";
import {onMounted} from "vue";
import getTDT from '@/js/UseTDT2304.js'
import {registerCGCS2000} from '@/js/UseTDT2304.js'
import Draw from 'ol/interaction/Draw.js';
import VectorSource from 'ol/source/Vector.js';
import VectorLayer from "ol/layer/Vector.js";
import {Modify} from "ol/interaction.js";
let map

const vec_tdt = getTDT("矢量底图","经纬度投影",'d06c497b107f57ebd6a0f8fbf967292d')
const img_tdt = getTDT("影像底图","经纬度投影",'d06c497b107f57ebd6a0f8fbf967292d')
const ter_tdt = getTDT("地形晕渲","经纬度投影",'d06c497b107f57ebd6a0f8fbf967292d')


const layerswitcher = new LayerSwitcher()
const initMap =()=>{
  registerCGCS2000()
  map = new Map({
    target: 'map',
    layers:[vec_tdt,img_tdt,ter_tdt],
    view: new View({
      center: [116, 30],
      zoom: 5,
      projection: 'EPSG:4490'
    })
  })

  map.addControl(layerswitcher)

}
onMounted(initMap)

const source =new VectorSource()
const vectorlayer = new VectorLayer({
  source: source,
})
const digital = () => {
const draw = new Draw({
  source: source,
  type: 'Polygon'
});
  map.addInteraction(draw);
  if (!map.getLayers().getArray().includes(vectorlayer)) {
    map.addLayer(vectorlayer);
  }
  draw.on('drawend', function (e) {
    map.removeInteraction(draw);
  });
}
let modify1;
const modify = () => {
const btn2 = document.querySelector('.tools button:nth-child(2)');
  if(btn2.innerText == "编辑"){
    btn2.innerText = "停止编辑"
    modify1 = new Modify({
      source: source
    });
    map.addInteraction(modify1);
  }else{
    btn2.innerText = "编辑"
    map.removeInteraction(modify1);
  }
};
</script>

<template>
  <div class="tools">
    <button @click="digital">矢量化</button>
    <button @click="modify">编辑</button>
  </div>
  <div id="map"></div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 700px;
}
.tools{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  opacity: 0.5;
}
.tools button{
  width: 100px;
  height: 25px;
}
</style>